<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
		<style>
			#tools {
				display: flex;
			}

			#search {
				width: 600px;
				display: flex;
				/* 				justify-content: space-between; */
			}

			body {
				min-width: 1200px;
			}
		</style>
	</head>
	<body>

		<div id="tools">
			<div id="search">
				<input type="text" id="searchUser" placeholder="请输入用户名" style="flex-grow: 2;" />
				<input type="text" id="searchAge" placeholder="请输入年龄" style="flex-grow: 2;" />
				<select id="searchSex" style="width: 100px; flex-grow: 1;">
					<option value="">请选择性别</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
				<button class="layui-btn" onclick="searchUser()"><i class="fa fa-search"></i>查询</button>
			</div>
			<div>
				<button class="layui-btn" onclick="showAddUserModel()"><i class="fa fa-plus"></i> 添加</button>
				<button class="layui-btn layui-btn-normal" onclick="showEditUserModel()"><i class="fa fa-edit"></i>
					编辑</button>
				<button class="layui-btn layui-btn-danger" onclick="deleteUser()"><i class="fa fa-trash"></i>
					删除</button>
				<button class="layui-btn layui-btn-danger" onclick="exportExcel()"><i class="fa fa-exchange"></i>
					导出</button>

				<button class="layui-btn layui-btn-danger" onclick="importExcel()"><i class="fa fa-exchange"></i>
					导入</button>
			</div>
			<div id="refresh">
				<button onclick="window.location.reload()" class="layui-btn layui-btn-primary layui-btn-sm"><i
						class="fa fa-undo"></i>
				</button>
				<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-link"></i>
				</button>
			</div>
		</div>
		<table id="userInfoTable" lay-even class="layui-table" lay-filter="test">

		</table>
		<div id="addUserModel" style="display: none;" align="center">
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;">
				<input type="hidden" name="userId" id="userId" />
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" id="userName" name="userName" required lay-verify="checkUserName"
							placeholder="请输入用户名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" id="userPwd" name="userPwd" required lay-verify="checkUserPwd"
							placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" pane>
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="userSex" value="男" title="男">
						<input type="radio" name="userSex" value="女" title="女">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">年龄</label>
					<div class="layui-input-block">
						<input type="number" id="userAge" name="userAge" required lay-verify="checkUserAge"
							placeholder="请输入年龄" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>

		<!--文件上传-->
		<div class="layui-upload-drag" id="uploadFile" style="display: none">
			<i class="layui-icon"></i>
			<p>点击上传，或将文件拖拽到此处</p>
			<div class="layui-hide" id="uploadDemoView">
				<hr>
			</div>
		</div>

		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function searchUser() {
				layui.table.reload("userInfoTable", {
					where: {
						userName: layui.$("#searchUser").val(),
						userAge: layui.$("#searchAge").val(),
						userSex: layui.$("#searchSex").val()
					}
				})
			}
			//拖拽上传
			layui.upload.render({
				elem: '#uploadFile',
				url: 'http://127.0.0.1:8080/repair/user/importExcel' //改成您自己的上传接口
					,
				accept: 'file' //普通文件
					,
				exts: 'xls|excel|xlsx' //只允许上传excel文件
					,
				done: function(res) {
					layer.msg(res.msg);
					layer.close(uploadFileModel);
					//layui.table.reload("user-table");
					userTab.reload(options);
				}
			});

			function importExcel() {
				uploadFileModel = layui.layer.open({
					type: 1,
					title: "上传用户信息",
					content: layui.$("#uploadFile")
				});
			}




			function exportExcel() {
				var a = document.createElement("a");
				//var userName = layui.$("input[name='searchUserName']").val();
				//a.href = "http://192.168.250.8:8080/repair/user/export?userName=" + userName;
				a.href = "http://127.0.0.1:8080/repair/user/exportExcel";
				a.style.display = "none";
				document.body.appendChild(a);
				a.click();

			}

			function test() {
				var user = {
					userName: "张三",
					userAge: 20
				}
				layui.$.ajax({
					url: "http://127.0.0.1:8080/repair/user/test1",
					method: "post",
					data: JSON.stringify(user),
					contentType: "application/json",
					dataType: "json",
					success: function(data) {
						// layui.use('layer', function() {
						// 	layer.msg(data.msg);
						// })
						layer.msg(data.msg);

					}
				});
			}
			var options = {
				elem: '#userInfoTable',
				height: 312,
				url: 'http://127.0.0.1:8080/repair/user/selectByPage' //数据接口
					,
				page: true //开启分页
					,
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[ //表头
						{
							type: 'checkbox'
						}, {
							field: 'userId',
							title: 'ID',
							width: 80,
							sort: true
						}, {
							field: 'userName',
							title: '用户名',
							width: 150
						}, {
							field: 'userSex',
							title: '性别',
							width: 80,
							sort: true
						}, {
							field: 'userAge',
							title: '年龄',
							width: 80
						}, {
							field: 'createTime',
							title: '创建时间',
							width: 250
						}, {
							field: 'updateTime',
							title: '更新时间',
							width: 250,
							sort: true
						}
					]
				]
			};
			layui.use('form', function() {
				var form = layui.form;

				//自定义验证规则
				form.verify({
					checkUserName: function(value) {
						if (value.length < 5) {
							return '用户名长度不能小于5';
						}
					},
					checkUserPwd: function(value) {
						if (value.length < 5) {
							return '密码长度不能小于5';
						}
					},
					checkVerify: function(value) {
						if (value.length == 0) {
							return '验证码不能为空';
						}
					}

				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					//关闭模态框
					layui.use('layer', function() {

						//通过ajax提交
						console.log(data.field.userName);
						console.log(data.field.userPwd);
						console.log(data.field.userSex);
						console.log(data.field.userAge);
						var userData;
						var url;
						if (data.field.userId == "") {
							url = "http://127.0.0.1:8080/repair/user/addUser";
							userData = {
								userName: data.field.userName,
								userPwd: data.field.userPwd,
								userSex: data.field.userSex,
								userAge: data.field.userAge
							};
						} else {
							url = "http://127.0.0.1:8080/repair/user/updateUser";
							userData = {
								userId: data.field.userId,
								userName: data.field.userName,
								userPwd: data.field.userPwd,
								userSex: data.field.userSex,
								userAge: data.field.userAge
							};
						}


						layui.$.ajax({
							url: url,
							method: "post",
							data: userData,
							dataType: "json",
							success: function(data) {
								if (data.code == 200) {
									//表示添加成功
									//关闭模态框
									layui.layer.close(userMode);
									//刷新页面
									userTab.reload(options);
									//弹出添加成功的提示
									layui.layer.msg(data.msg);

								}
								if (data.code == 500) {
									//表示添加失败
									layui.layer.msg(data.msg);
								}
							}
						});

					});
					return false;
				});
			});

			layui.use('table', function() {
				var table = layui.table;

				//第一个实例
				userTab = table.render(options);

			});

			function showAddUserModel() {
				clearModel();
				layui.use('layer', function() {
					var layer = layui.layer;
					var $ = layui.$;

					userMode = layer.open({
						title: '添加用户',
						type: 1,
						content: $('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				});

			}

			function showEditUserModel() {
				clearModel();
				layui.use(['table', 'layer'], function() {
					var table = layui.table;

					var checkStatus = table.checkStatus('userInfoTable'); //userInfoTable 即为基础参数 id 对应的值
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}

					if (checkStatus.data.length > 1) {
						layui.layer.msg('请选择一条数据');
						return;
					}

					//向模态框赋值
					layui.$("#userId").val(checkStatus.data[0].userId);
					layui.$('#userName').val(checkStatus.data[0].userName);
					layui.$('#userPwd').val(checkStatus.data[0].userPwd);
					layui.$('#userAge').val(checkStatus.data[0].userAge);
					// layui.$('#userPwd').val(checkStatus.data[0].userPwd);
					if (checkStatus.data[0].userSex == '男') {
						layui.$("input[value='男']").attr("checked", "checked");;
					}

					if (checkStatus.data[0].userSex == '女') {
						layui.$("input[value='女']").attr("checked", "checked");;
					}

					//展示模态框
					userMode = layui.layer.open({
						title: '编辑用户',
						type: 1,
						content: layui.$('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});



				})

			}

			function clearModel() {
				layui.$('#userName').val('');
				layui.$('#userPwd').val('');
			}

			function deleteUser() {
						layui.use(['table', 'layer'], function() {
							var table = layui.table;
		
							var checkStatus = table.checkStatus('userInfoTable'); //userInfoTable 即为基础参数 id 对应的值
							console.log(checkStatus.data); //获取选中行的数据
							console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
							console.log(checkStatus.isAll); //表格是否全选
							if (checkStatus.data.length == 0) {
								layui.layer.msg('请选择数据');
								return;
							}
		
							var allUserId = [];
							for (var i = 0; i < checkStatus.data.length; i++) {
								allUserId.push(checkStatus.data[i].userId)
		
							}
							//向后台提交
							layui.$.ajax({
								url: "http://127.0.0.1:8080/repair/user/deleteUser",
								method: "post",
								data: {
									"allUserId": allUserId
								},
								dataType: "json",
								traditional: true,
								success: function(data) {
									if (data.code == 200) {
										//表示添加成功
										//关闭模态框
										//刷新页面
										userTab.reload(options);
										//弹出添加成功的提示
										layui.layer.msg(data.msg);
		
									}
									if (data.code == 500) {
										//表示添加失败
										layui.layer.msg(data.msg);
									}
								}
							});
							//提交成功后,刷新界面
		
						});
					}
		</script>
	</body>
</html>
